<template>
  <div class="profile-container">
    <el-card class="profile-card" shadow="hover">
      <div class="profile-header">
<!--        <el-upload :show-file-list="false"  class="avatar-uploader" :action="uploadUrl" :on-success="handleFileUpload">-->
<!--          <img v-if="data.user.avatar" :src="data.user.avatar" class="avatar" />-->
<!--          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>-->
<!--        </el-upload>-->
        <el-upload
            :show-file-list="false"
            class="avatar-uploader"
            :action="uploadUrl"
            :on-success="handleFileUpload"
            :before-upload="beforeUpload"
            :data="uploadData"
            name="multipartFile"
        >
          <img v-if="data.user.avatar" :src="data.user.avatar" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>

        <el-space direction="vertical" style="margin-left: 20px;">
          <el-tag type="info" effect="dark">{{ data.user.name }}</el-tag>
          <el-tag>{{ data.user.username }}</el-tag>
        </el-space>
      </div>
      <el-divider></el-divider>
      <el-form :model="data.user" label-width="120px" class="profile-form">
        <el-form-item label="账号">
          <el-input disabled v-model="data.user.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="data.user.name" autocomplete="off" />
        </el-form-item>

      </el-form>
      <div style="text-align: center; margin-top: 20px;">
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import request from "@/utils/request";
import { ElMessage } from "element-plus";

const uploadUrl = import.meta.env.VITE_BASE_URL + "/files/upload";
const data = reactive({
  user: JSON.parse(localStorage.getItem("system-user") || "{}"),
});
// 文件上传成功后处理
const handleFileUpload = (response) => {
  if (response ) {
    data.user.avatar = response; // 假设返回的数据包括新头像的URL
    ElMessage.success("头像上传成功");
  } else {
    ElMessage.error("头像上传失败");
  }

};
// 可选：文件上传之前检查
const beforeUpload = (file) => {
  const isImage = file.type.startsWith('image/');
  if (!isImage) {
    ElMessage.warning("上传文件必须是图片");
  }
  return isImage; // 返回 false 以阻止上传，返回 true 以继续上传
};
// 表单数据
const uploadData = {}; // 如果上传需要携带额外数据，您可以在这里添加

const emit = defineEmits(["updateUser"]);

// 提交表单数据
const save = () => {
  if (!data.user.name) {
    ElMessage.warning("名称不能为空");
    return;
  }

  request.put("/admin/update", data.user).then((res) => {
    if (res.code === "200") {
      ElMessage.success("更新成功");
      localStorage.setItem("system-user", JSON.stringify(data.user));
      emit("updateUser");
    } else {
      ElMessage.error(res.msg || "更新失败");
    }
  }).catch((error) => {
    ElMessage.error("请求错误，请稍后再试");
    console.error(error);
  });
};


</script>


<style scoped>
.profile-container {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.profile-card {
  width: 80%;
  max-width: 800px;
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.avatar-uploader .el-upload {
  border: none;
}

.avatar-uploader-icon {
  font-size: 50px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.profile-form {
  width: 100%;
}

.el-divider {
  margin: 20px 0;
}
</style>
